import { useContext, useEffect, useState } from "react"
import styled from "styled-components"

import { TextContext } from "@/contexts/boxContext"
import { useRefsList } from "@/hooks/useRefsList"

import "@/style.css"

const Nav = styled.nav`
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  background-color: #000000;
`

const Button = styled.button`
  width: 50px;
  height: 20px;
  background-color: #ffffff;
  border: none;
  border-radius: 5px;
  color: #000000;
`

const Container = styled.div`
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 60px;
`

const Content = styled.div`
  width: 200px;
  height: 200px;
  background-color: skyblue;
  text-align: center;
  line-height: 200px;
`

const list = Array.from({ length: 10 }, (_, i) => i)

const Box = function ({ ref }: { ref: React.Ref<HTMLDivElement> }) {
  const context = useContext(TextContext)
  return <Content ref={ref}>{context}</Content>
}

export default function Options() {
  const [active, setActive] = useState(0)
  const refs = useRefsList<HTMLDivElement>()

  function scrollToId(itemId: number) {
    const node = refs.current[itemId]
    node.scrollIntoView({ behavior: "smooth", block: "center" })
    setActive(itemId)
  }

  return (
    <>
      <Nav>
        <Button onClick={() => scrollToId(0)}>0</Button>
        <Button onClick={() => scrollToId(5)}>5</Button>
        <Button onClick={() => scrollToId(9)}>9</Button>
        <Button>{active}</Button>
      </Nav>
      <Container>
        <div style={{ display: "flex", flexDirection: "column", gap: "10px" }}>
          {list.map((val) => (
            <TextContext.Provider key={val} value={val + 1}>
              <Box ref={refs.current.set}></Box>
            </TextContext.Provider>
          ))}
        </div>
      </Container>
    </>
  )
}
